<template>
    <!-- <h3>注册</h3> -->
    <div class="login">
        <div class="container mt-5">
            <div class="form">
                <h3>用户登录</h3>
                <div class="mb-3">
                    <label for="account" class="form-label">账号</label>
                    <input v-model="userForm.account" type="text" class="form-control" id="account" placeholder="请输入账号">
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input v-model="userForm.password" type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>

                <div class="mb-3">
                    <button class="btn btn-primary" @click="loginFn">点击登录</button>
                </div>
                <div>
                    <router-link class="btn btn-sm ml-5" to="/register">没有账号,立即注册</router-link> | 
                    <router-link class="btn btn-sm ml-5" to="/home">主页</router-link>
                </div>
            </div>
            
        </div>
    </div>
</template>

<!-- 组合式开发   -->
<script setup lang="ts">
import { login } from '@/api';
import { reactive } from 'vue';
import { useRouter } from 'vue-router'

// 路由实例
const router = useRouter();

// 规范对象结构
interface IUser {
    account: string
    password: string
}

// 采集表单信息
const userForm = reactive<IUser>({
    account:"",
    password:""
})

// 点击登录
const loginFn =  async ()=> {
    // let  {account , password} = userForm;
    let account = userForm.account;
    let password = userForm.password;
    if(account == "" || password == ""){
        alert("输入框不能为空");
        return false;
    }
    await login({account, password}).then(
        (resData: any)=>{
            console.log(resData);
            alert(resData.msg);
            if(resData.code == 200){
                let { token } = resData;
                localStorage.setItem("AUTO_TOKEN",token);
                setTimeout(()=>{
                    if(confirm("您想跳转个人中心吗")){
                        router.push({path:"/user"})
                    }
                    else {
                        router.push({path:"/home"})
                    }
                },150)
            }
        }
    )
}
</script>

